<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.global.js"></script>
    <style>
        .demo {
            font-family: sans-serif;
            border: 1px solid #eee;
            border-radius: 2px;
            padding: 20px 30px;
            margin-top: 1em;
            margin-bottom: 40px;
            user-select: none;
            overflow-x: auto;
        }
    </style>
</head>

<body>
    <div id="components-app" class="demo">
        <ol>
            <!-- 根据杂货列表的长度 渲染对应个数的todo-item子组件 -->
            <!-- v-bind:todo="item" 给子组件传递属性prop -->
            <!-- v-bind:key="item.id" 列表渲染中根据key迅速定位唯一的item-->
            <todo-item 
            v-for="item in groceryList" 
            v-bind:todo="item" 
            v-bind:key="item.id">
            </todo-item>
        </ol>
    </div>

    <script>
        // 定义子组件
        const TodoItem = {
            // 接收父组件传递过来的todo属性
            props: ['todo'],

            // 子组件的模板
            template: `<li>{{ todo.text }}</li>`
        }

        const TodoList = {
            // 父组件的数据闭包
            data() {
                return {
                    // 杂货列表数据
                    // 每个项目将渲染出一个todo-item子组件
                    groceryList: [
                        { id: 0, text: 'Vegetables' },
                        { id: 1, text: 'Cheese' },
                        { id: 2, text: 'Whatever else humans are supposed to eat' }
                    ]
                }
            },

            /* 声明子组件 */
            components: {
                TodoItem
            }
        }
        
        Vue.createApp(TodoList).mount("#components-app")
    </script>
</body>

</html>